'use strict';

import Vue from 'vue';
import {requestAnimFrame,TransitionEnd} from '../public/common/utils'

Vue.directive('mtrans', {
  bind:function(){
    let classList=this.el.classList;
    //initialize
    this.isShow=this.vm.dataShow;
    this.transName=this.arg;
    this.transPrefix='-transition';
    this.transEnterfix='-enter';
    this.transLeavefix='-leave';
    if(this.isShow==false){
      classList.add("help-hidden");
    }
    this.init=function(){
      classList.add("help-hidden")
      classList.remove("help-block")
      classList.remove(this.transName+this.transPrefix)
      classList.remove(this.transName+this.transEnterfix)
      classList.remove(this.transName+this.transLeavefix)
    }
    this.handler=function(){
      if(!this.isShow){
        this.init()
      }
    }.bind(this)
    this.el.addEventListener(TransitionEnd,this.handler)
  },
  update:function(newValue, oldValue){
    let classList=this.el.classList
    let transName=this.transName
    if(newValue===true){
      this.init();
      this.isShow=true;
      //step1 add trans
      classList.add(transName+this.transPrefix)
      //step2 remove hidden
      classList.remove("help-hidden")
      //step3 show
      classList.add('help-show')
      requestAnimFrame(()=>{
        //step4 go animate
        classList.add(transName+this.transEnterfix)
      })
    }else if(newValue===false&&oldValue!=undefined){
      this.isShow=false;
      classList.add(transName+this.transLeavefix)
    }
  },
  unbind:function(){

  }
})
